<template>
  <div>
    <el-checkbox
      class="checkbox"
      v-if="!_disabled"
      v-model="allSelected"
      :indeterminate="indeterminate"
      @change="handleAllSelect"
    >{{ $t('common.selectAll') }}</el-checkbox>
    <el-tree
      ref="tree"
      :data="resourceData"
      show-checkbox
      check-on-click-node
      @check-change="handleCheckChange"
      :props="defaultProps"
      node-key="authIndex"
      :default-checked-keys="defaultKeys"
    ></el-tree>
  </div>
</template>

<script>
import { generateTitle } from "@/utils/i18n";
import _ from "lodash";
export default {
  props: {
    permission: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      resourceData: [],
      defaultProps: {
        label: "title",
        children: "children"
      },
      defaultKeys: [0],
      generateTitle,
      allSelected: false,
      indeterminate: true,
      selectedKeys: []
    };
  },
  mounted() {
    this.getTree();
    this.initData(this.resourceData);
  },
  computed: {
    _disabled: {
      get() {
        return this.disabled;
      },
      set(val) {
        this.$emit("update:disabled", val);
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (!val) {
          this.resetData();
        } else {
          this.$nextTick(() => {
            this.getTree();
            this.initData(this.resourceData);
          });
        }
      }
    },
    permission: {
      handler(val) {
        if (val) {
          this.initData(this.resourceData);
        }
      },
      deep: true,
      immediate: true
    },
    _disabled: {
      handler(val) {
        this.initData(this.resourceData);
      },
      deep: true,
      immediate: true
    },
    selectedKeys: {
      handler(val) {
        console.log("select", val);
        if (!this.resourceData.length) return;
        this.$refs.tree.setCheckedKeys(val);
        if (val.length === this.resourceData.length) {
          this.allSelected = true;
          this.indeterminate = false;
        } else if (val.length > 0 && val.length < this.resourceData.length) {
          this.allSelected = false;
          this.indeterminate = true;
        } else {
          this.allSelected = false;
          this.indeterminate = false;
        }
        this.$emit("updatePermission", this.resourceData, _.cloneDeep(val));
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    resetData() {
      this.getTree();
      this.defaultKeys = [0];
      this.allSelected = false;
      this.indeterminate = true;
      this.selectedKeys = [0];
    },
    handleAllSelect(val) {
      if (val) {
        const allKeys = this.resourceData.map(item => item.authIndex);
        this.$set(this, "selectedKeys", allKeys);
      } else {
        this.$set(this, "selectedKeys", [0]);
      }
    },
    initData(val) {
      this.initDefaultKeys(val);
      this.initDisabled(val);
    },
    initDefaultKeys(treeData) {
      const initKeys = _.cloneDeep(this.defaultKeys);
      const { permission } = this;
      if (permission === "all") {
        treeData.map((item, index) => {
          if (item.authIndex > 0) initKeys.push(item.authIndex);
        });
      } else if (permission) {
        treeData.map((item, index) => {
          if (permission[index] == "1") {
            if (item.authIndex > 0) initKeys.push(item.authIndex);
          }
        });
      }
      this.$set(this, "selectedKeys", initKeys);
    },
    initDisabled(treeData) {
      treeData.map((item, index) => {
        this.$set(item, "disabled", this._disabled);
      });
      this.$set(treeData[0], "disabled", true);
      this.$refs.tree.getCheckedKeys();
    },
    getTree() {
      const menus = _.cloneDeep(this.$store.state.menus);
      const resourceData = [];
      menus.map(item => {
        if (item.meta && item.meta.authIndex !== void 0) {
          item.meta.title = this.generateTitle(item.meta.title);
          resourceData.push(item.meta);
        }
        if (item.children && item.children.length > 0) {
          item.children.map(item => {
            if (item.meta && item.meta.authIndex !== void 0) {
              item.meta.title = this.generateTitle(item.meta.title);
              resourceData.push(item.meta);
            }
          });
        }
      });
      this.resourceData = resourceData;
    },
    handleCheckChange() {
      this.$set(this, "selectedKeys", this.$refs.tree.getCheckedKeys());
    }
  }
};
</script>

<style>
.checkbox {
    margin-left:24px;
}
</style>